<!-- 首页 -->
<template>
	<view class="Home">
		<!-- 搜索 -->
		<Header-Search></Header-Search>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="reachBottom" @scroll="scroll">
			<!-- 轮播图 -->
			<u-swiper :list="swiperList" circular height="374rpx" radius="0" @change="e => (currentNum = e.current)" :autoplay="true" indicatorStyle="right: 40rpx">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>
			<!-- 宫格 -->
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex" @click="tips(listItem.text)">
					<u--image :src="listItem.imgurl" width="80rpx" height="80rpx"></u--image>
					<text class="grid-text">{{ listItem.text }}</text>
				</u-grid-item>
			</u-grid>
			<view class="animation">
				<view class="animate__animated animate__heartBeat">今日推荐</view>
				<router-link :to="`/pages/Sort/Sort`">
					<view>
						更多内容
						<span>👉</span>
					</view>
				</router-link>
			</view>
			<!-- 列表 -->
			<u-cell size="large" v-for="(item, index) in indexList" :key="index" :title="item.name" @click="gotoSortDetails(item.id)" style="background-color: #fafafa;">
				<text slot="label" class="u-line-3" v-html="item.content"></text>
				<u-avatar slot="icon" shape="square" size="88" :src="item.pic" customStyle="margin: -3px 5px -3px 0"></u-avatar>
			</u-cell>
		</scroll-view>

		<u-toast ref="uToast" />
		<!-- 置顶按钮 -->
		<xrzp-Istop :goTop="goTop" :toTopShow='toTopShow'></xrzp-Istop>
		<!-- 底部选项卡 -->
		<xrzp-FootTabbar></xrzp-FootTabbar>
	</view>
</template>

<script>
import { request_byclass as itemList } from '@/api/http.js';
export default {
	data() {
		return {
			currentNum: 0,
			scrollTop: 0,
			toTopShow: false,
			old: {
				scrollTop: 0
			},
			swiperList: [
				require('@/assets/home/circulation1.jpg'),
				require('@/assets/home/circulation2.jpg'),
				require('@/assets/home/circulation3.jpg'),
				require('@/assets/home/circulation4.jpg'),
				require('@/assets/home/circulation5.jpg'),
				require('@/assets/home/circulation6.jpg'),
			],
			list: [
				{ imgurl: require('@/assets/home/r01.jpg'), text: '一周最热' },
				{ imgurl: require('@/assets/home/r02.jpg'), text: '人气菜肴' },
				{ imgurl: require('@/assets/home/r03.jpg'), text: '春季食谱' },
				{ imgurl: require('@/assets/home/r04.jpg'), text: '高颜值' },
				{ imgurl: require('@/assets/home/r05.jpg'), text: '早餐' },
				{ imgurl: require('@/assets/home/r06.jpg'), text: '家常菜谱' },
				{ imgurl: require('@/assets/home/r07.jpg'), text: '烘焙大全' },
				{ imgurl: require('@/assets/home/r08.jpg'), text: '新闻' }
			],
			indexList: [],
			start: 0,
			appkey: '13e76141171ebe61f22e24477b559988'
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		async getData() {
			let data = {
				classid: 324,
				start: 0,
				num: 20,
				appkey: this.appkey
			};
			let res = [];
			res = await itemList(data);
			this.indexList = res.list;
		},
		// 滚动事件
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
			this.toTopShow = this.old.scrollTop >= 300
		},
		goTop() {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
		},
		// 宫格点击提示
		tips(name) {
			if (name != '新闻') {
				this.$refs.uToast.show({
					type: 'error',
					message: '功能未开放'
				});
			} else {
				uni.navigateTo({
					url: `/pages/Home/Journalism`
				});
			}
		},
		// 跳转到详情页
		gotoSortDetails(id) {
			uni.navigateTo({
				url: `/pages/Sort/SortDetails?id=${id}`
			});
		},
		// 触底加载...
		reachBottom() {
			this.start += 20;
			let data = {
				classid: 324,
				start: this.start,
				num: 20,
				appkey: this.appkey
			};
			itemList(data).then(res => {
				if (res) {
					this.indexList = [...this.indexList, ...res.list];
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: '到底了哦~'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.Home {
	uni-scroll-view {
		width: 100%;
		height: calc(100vh - 200rpx);
	}
	.indicator-num {
		padding: 4rpx 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 200rpx;
		width: 70rpx;
		@include flex;
		justify-content: center;
		&__text {
			color: #ffffff;
			font-size: 24rpx;
		}
	}
	.u-grid {
		margin-top: 20rpx;
		.u-grid-item {
			margin-bottom: 20rpx;
			.grid-text {
				font-size: 28rpx;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}
	}
	.animation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.animate__animated {
			animation-duration: 1.8s;
			animation-iteration-count: infinite;
			font-size: 36rpx;
			display: inline-block;
			margin-left: 40rpx;
			color: red;
			text-shadow: -2rpx -2rpx 0 #fff, 2rpx 2rpx 0 #333, 2rpx 2rpx 0 #444;
			line-height: 60rpx;
		}
		a {
			text-decoration: none;
		}
		view:last-child {
			margin-right: 40rpx;
			font-size: 28rpx;
			cursor: pointer;
			background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
			background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-left: 20rpx;
			font-weight: 400;
			span {
				position: relative;
				top: -4rpx;
				color: yellow;
				-webkit-text-fill-color: yellow;
			}
		}
	}
	::v-deep .u-cell__title-text {
		font-size: 30rpx;
		font-weight: bold;
		padding-bottom: 14rpx;
	}
	.u-line-3 {
		font-size: 24rpx;
	}
}
</style>
